/*
  引用动画
  <transition name="fadeInRight">
    <dom v-if />
  </transition>
*/
// 右边进入 右边退出
/* .MoveRightIn-enter-active {
  animation: MoveRightIn .5s;
}
.MoveRightIn-leave-active {
  animation: MoveRightOut .5s;
}

// 右边进入 左边退出
.MoveRightInLeftOut-enter-active {
  animation: MoveRightIn .5s;
}
.MoveRightInLeftOut-leave-active {
  animation: fadeOutLeft .5s;
}

// 右边进入
@keyframes MoveRightIn {
  0% {
    opacity: 0;
    transform-origin: 0 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform-origin: 0 0;
    transform: translateX(0%);
  }
}

// 右边退出
@keyframes MoveRightOut {
  0% {
    transform-origin: 0 0;
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform-origin: 0 0;
    transform: translateX(100%);
    opacity: 0;
  }
}

// 左边进入
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

// 左边退出
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
 */

// 渐变进入
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
// 渐变退出
@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-enter-active {
  animation: fade-in 0.3s;
}
.fade-leave-active {
  animation: fade-out 0.3s;
}
